<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script src="https://s3.pstatp.com/cdn/expire-1-M/jquery/3.1.1/jquery.min.js"></script>
    <!-- 最新版本的 Bootstrap 核心 CSS 文件 -->
    <link rel="stylesheet" href="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/css/bootstrap.min.css">
    <!-- 最新的 Bootstrap 核心 JavaScript 文件 -->
    <script src="https://cdn.bootcdn.net/ajax/libs/twitter-bootstrap/3.4.1/js/bootstrap.min.js"></script>
    <script>
        //操作前先判断用户是否存在
        var loginUser = null;
        window.onload = function() {
            loginUser = sessionStorage.getItem('loginUser');
            $.ajax({
                url: "system/yanzheng",
                data: {},
                type: "get",
                success: function (res) {
                    console.log("RES", res);
                    if(res.code != 200) {
                        alert("用户未登录");
                        window.location.href = "login.html";
                    }

                }
            })
            console.log("loginUser",loginUser);
            if (loginUser) {
                var loginedUser = JSON.parse(loginUser);
                console.log("loginedUser",loginedUser);
                if (loginedUser){
                    document.getElementById("loginBtn").style.display = "none";
                    document.getElementById('username').textContent = loginedUser.username;
                }
            }
            if (!loginUser){
                document.getElementById("ifLogin").style.display = "none";
                document.getElementById("exitBtn").style.display = "none";
            }
        };
        // 获取分页数据
        let params = {
            pn:1
        }
        function fetchReleasedData(pageNum) {
            params.pn = pageNum || 1; // 如果未提供页码，则默认为1
            $.ajax({
                url: "user/users",
                data: params,
                type: "get",
                success: function (result) {
                    $("#currentPage").text(result.pageNum);
                    $("#pages").text(result.pages);
                    $("#total").text(result.total);
                    // 1、解析并显示员工数据
                    buildUsersTab(result);
                    // 2、解析显示分页信息
                    buildNavTab(result);
                }
            });
        }

        $(function () {
            let currentPage = getCurrentPage(); // 从localStorage获取当前页码
            fetchReleasedData(currentPage);
        });

        // 保存当前页
        function saveCurrentPage(pn) {
            localStorage.setItem('currentPage', pn);
        }
        //获取当前页码
        function getCurrentPage() {
            let pn = localStorage.getItem('currentPage');
            // 如果localStorage中没有'currentPage'，则返回一个默认值，比如1
            return pn ? parseInt(pn, 10) : 1;
        }


        $(function () { // DOM 加载完毕默认要执行的函数
            $.ajax({
                url:"user/users",
                data:"pn=1",
                type:"get",
                success:function (result) {
                    $("#currentPage").text(result.pageNum);
                    $("#pages").text(result.pages);
                    $("#total").text(result.total);
                    // 1、解析并显示员工数据
                    buildUsersTab(result);
                    // 2、解析显示分页信息
                    buildNavTab(result);
                }
            });

        })

        // 获取第几页的数据
        function toPage(pn) {
            console.log("获取第" + pn  + "页数据");
            saveCurrentPage(pn);
            $.ajax({
                url: "user/users",
                data: "pn="+pn,
                type:"GET",
                success:function (result) { // 这里面是不是就包括有当前页是第几页
                    // console.log("第" + pn +"页数据",result)
                    // 重新构建数据table
                    buildUsersTab(result);
                    // 重新构建分页条
                    buildNavTab(result);
                    // 更新表格左下角的页码
                    updateCurrentPage(result.pageNum);
                }
            });
        }

        function updateCurrentPage(pageNum) {
            $("#currentPage").text(pageNum);
        }

        // 构建分页条
        function buildNavTab(result) {

            // $("#userstab tbody").empty(); // 这个是去掉表格数据
            $("#pnav").empty();
            console.log(result.hasPreviousPage+ "---",result);
            var ul = $("<ul></ul>").addClass("pagination")
            var firstPageLi = $("<li></li>").append($("<a onclick='toPage(1)'></a>").append("首页").attr("href","#"));
            var prePageLi;
            var nexPageLi;
            if (!result.hasPreviousPage) {
                prePageLi = $("<li></li>").addClass("disabled").append($("<a onclick='toPage("+(result.pageNum-1)+")'></a>").append("&laquo;").attr("href","#")); // 上一页
            } else {
                prePageLi = $("<li></li>").append($("<a onclick='toPage("+(result.pageNum-1)+")'></a>").append("&laquo;").attr("href","#")); // 上一页
            }
            if (!result.hasNextPage) {
                nexPageLi = $("<li></li>").addClass("disabled").append($("<a onclick='toPage("+(result.pageNum+1)+")'></a>").append("&raquo;").attr("href","#")); // 下一页
            } else {
                nexPageLi = $("<li></li>").append($("<a onclick='toPage("+(result.pageNum+1)+")'></a>").append("&raquo;").attr("href","#")); // 下一页
            }

            var lastPageLi = $("<li></li>").append($("<a onclick='toPage("+result.pages+")'></a>").append("尾页").attr("href","#"));
            ul.append(firstPageLi).append(prePageLi);
            // 遍历总的页数
            $.each(result.navigatepageNums,function (index,item){ // item 是分页条上的页码
                // 选中页要成为激活状态active
                var numli;
                if (result.pageNum == item) { // 后台返回的数据显示在表格里的页的数据（有个第几页） == 当前点的页码
                    numli = $("<li></li>").addClass("active").append($("<a onclick='toPage("+item+")'></a>").append(item));
                } else {
                    numli = $("<li></li>").append($("<a onclick='toPage("+item+")'></a>").append(item));
                }
                ul.append(numli);
            });


            ul.append(nexPageLi).append(lastPageLi);
            var nav = $("<nav></nav>").append(ul);
            nav.appendTo("#pnav");
        }

        function buildUsersTab(obj) {
            $("#userstab tbody").empty();
            // 得到obj中的LIST
            var users = obj.list;
            // users：遍历的集合list
            // item：每一条数据
            $.each(users, function (index, item) {
                var checkbox = $("<td></td>").append("<input type='checkbox' class='checkbox' name='checkbox' value='" + item.id +"'/>");
                var id = $("<td></td>").append(item.id);
                var name = $("<td></td>").append(item.name);
                var age = $("<td></td>").append(item.age);
                var gender = $("<td></td>").append(item.gender);
                var card = $("<td></td>").append(item.card);
                var province = $("<td></td>").append(item.province);
                var city = $("<td></td>").append(item.city);
                var district = $("<td></td>").append(item.district);
                var detailed_address = $("<td></td>").append(item.detailedAddress);
                var editBtn = $("<button data-toggle='modal' data-target='#exampleModal'onclick='update("+item.id+")'>编辑</button>").addClass("btn btn-success");
                var deleteBtn = $("<button onclick='deleteright("+item.id+")'>删除</button>").addClass("btn btn-danger");
                var btnTd = $("<td></td>").append(editBtn).append(deleteBtn);
                $("<tr></tr>")
                    .append(checkbox)
                    .append(id)
                    .append(name)
                    .append(age)
                    .append(gender)
                    .append(card)
                    .append(province)
                    .append(city)
                    .append(district)
                    .append(detailed_address)
                    .append(btnTd)
                    .appendTo("#userstab tbody");
            });
        }

        //新增
        function saveData(){
            console.log(loginUser);
            if (!loginUser){
                alert("您还没有登录，请先登录!");
                window.location.href ="login.html";
                return;
            }else {
                var name = document.getElementById("inputName").value;
                var card = document.getElementById("inputIdcard").value;
                var age = calculateAge(card);
                var gender = calculateGender(card);
                var province = document.getElementById("province").value;
                var city = document.getElementById("city").value;
                var district = document.getElementById("district").value;
                var detailed_address = document.getElementById("inputDetailedaddress").value;
                var creator = null;
                if (loginUser) {
                    creator = JSON.parse(loginUser).username;
                }
                var user = {
                    name: name,
                    age: age,
                    gender: gender,
                    card: card,
                    province: province,
                    city: city,
                    district: district,
                    detailedAddress: detailed_address,
                    creator: creator
                };
                var idcard = document.getElementById('inputIdcard').value;
                if (isValidIDCard(idcard)) {
                    console.log('身份证号码格式正确，可以继续保存数据');
                    // 在这里添加保存数据的代码，比如通过AJAX发送到服务器
                } else {
                    alert('身份证号码格式不正确，请重新输入')
                    // 可以选择将输入框聚焦，以便用户重新输入
                    document.getElementById('inputIdcard').focus();
                    return;
                }
                let currentPage = getCurrentPage(); // 从localStorage中获取当前页码
                $.ajax({
                    url: 'user/insert',
                    data: JSON.stringify(user),
                    type: 'post',
                    dataType: 'json',
                    contentType: "application/json;charset=utf-8",
                    success: function (res) {
                        console.log("res:", res);
                        if (res.code == 200) {
                            alert("添加成功");
                            $("#myModal").modal('hide');
                            fetchReleasedData(currentPage);
                            insertEmpty()
                        } else {
                            alert("身份证已注册！请重新注册");
                        }

                    },
                    complete: function (err) {//如果出错，这里会显示出错误信息
                        console.log("err:", err)
                    }
                });
            }
        }
        //身份证验证
        function isValidIDCard(card) {
            var regex = /^\d{6}(18|19|20)?\d{2}(0[1-9]|1[012])(0[1-9]|[12][0-9]|3[01])\d{3}(\d|X|x)$/;
            return regex.test(card);
        }
        // 计算性别是：身份证的倒数第二位
        function calculateGender(card) {
            // 确保是18位身份证
            if (card.length !== 18) {
                return '无效的身份证号码';
            }

            const genderDigit = parseInt(card.charAt(16), 10); // 获取第17位数字
            if (isNaN(genderDigit)) {
                return '身份证号码格式错误';
            }

            return genderDigit % 2 === 0 ? '女' : '男';
        }
        // 计算年龄
        function calculateAge(card) {
            // 确保是18位身份证
            if (card.length !== 18) {
                return '无效的身份证号码';
            }

            const birthYear = parseInt(card.substring(6, 10), 10); // 提取出生年份
            const birthMonth = parseInt(card.substring(10, 12), 10); // 提取出生月份
            const birthDay = parseInt(card.substring(12, 14), 10); // 提取出生日

            const birthDate = new Date(birthYear, birthMonth - 1, birthDay); // 注意月份是从0开始的
            const today = new Date();

            let age = today.getFullYear() - birthYear;
            // 如果今天的日期小于出生日期的今年对应日期，则年龄减一
            if (today.getMonth() < birthMonth || (today.getMonth() === birthMonth && today.getDate() < birthDay)) {
                age--;
            }

            return age;
        }

        //批量删除
        function deleteall(){
            console.log(loginUser);
            if (!loginUser){
                alert("您还没有登录，请先登录!");
                window.location.href ="login.html";
                return;
            }else {
                var checkedNum = $("input[name='checkbox']:checked").length;
                if (checkedNum == 0) {
                    alert("请至少选择一个进行删除！！！");
                    return;
                }
                if (confirm("确认要删除这些用户吗？")) {
                    var userlist = new Array();
                    $("input[name='checkbox']:checked").each(
                        function () {
                            userlist.push($(this).val())
                        }
                    );
                    console.log("ids", userlist)
                    $.ajax({
                        type: "post",
                        url: "user/deleteall",
                        data: JSON.stringify(userlist),
                        dataType: "json",
                        contentType: "application/json",
                        success: function () {
                            alert("删除成功");
                            location.reload();

                        },
                        error: function (xhr, status, error) {
                            alert("删除失败: " + xhr.responseText);
                        }
                    });
                }else {
                    alert("取消删除")
                }
            }
        }
        // 批量删除全选
        function checkAll(){
            var isChecked = $('#checkAll').is(':checked');
            // 根据 #checkAll 的选中状态来设置其他复选框的选中状态
            $('.checkbox').prop('checked', isChecked);
            console.log($('.checkbox').prop('checked', isChecked));
        }

        //编辑
        function update(id){
            $("#Id").val(id);
        }
        function updateData(){
            console.log(loginUser);
            if (!loginUser){
                alert("您还没有登录，请先登录!");
                window.location.href ="login.html";
                return;
            }else {
                var idcard = document.getElementById('updateIdcard').value;
                if (isValidIDCard(idcard)) {
                    console.log('身份证号码格式正确，可以继续保存数据');
                    // 在这里添加保存数据的代码，比如通过AJAX发送到服务器
                } else {
                    alert('身份证号码格式不正确，请重新输入')
                    // 可以选择将输入框聚焦，以便用户重新输入
                    document.getElementById('updateIdcard').focus();
                    return;
                }
                if(window.confirm("确认修改吗？")) {
                    var id = $("#Id").val();
                    var name = document.getElementById("updateName").value;
                    var card = document.getElementById("updateIdcard").value;
                    var age = calculateAge(card);
                    var gender = calculateGender(card);
                    var province = document.getElementById("province1").value;
                    var city = document.getElementById("city1").value;
                    var district = document.getElementById("district1").value;
                    var detailed_address = document.getElementById("updateDetailedaddress").value;
                    var updater = null;
                    if (loginUser) {
                        updater = JSON.parse(loginUser).username;
                        console.log(updater)
                    };
                    var user = {
                        id: id,
                        name: name,
                        age: age,
                        gender: gender,
                        card: card,
                        province: province,
                        city: city,
                        district: district,
                        detailedAddress: detailed_address,
                        updater: updater
                    };
                    let currentPage = getCurrentPage();// 从localStorage中获取当前页码
                    $.ajax({
                        url: 'user/update',
                        data: JSON.stringify(user),
                        type: 'put',
                        dataType: 'json',
                        contentType: "application/json;charset=utf-8",
                        success: function (res) {
                            console.log("res:", res);
                            if(res.code == 200){
                                alert("编辑成功");
                                $("#exampleModal").modal('hide');
                                $("#currentPage").text(res.pageNum);
                                $("#pages").text(res.pages);
                                $("#total").text(res.total);
                                fetchReleasedData(currentPage);
                                updateEmpty()
                            }else {
                                alert("身份证已存在，编辑失败")
                            }

                        },
                        complete: function (err) {//如果出错，这里会显示出错误信息
                            console.log("err:", err);
                        }
                    });
                }else {
                    alert("取消编辑");
                    updateEmpty()
                }
            }
        }
        //清空模态框内容
        function  updateEmpty(){
            document.getElementById("updateName").value = null;
            document.getElementById("updateIdcard").value = null;
            document.getElementById("updateDetailedaddress").value = null;
            document.getElementById("province1").value = "";
            document.getElementById("city1").value = "";
            document.getElementById("district1").value = "";
        }
        function  insertEmpty(){
            document.getElementById("inputName").value = null;
            document.getElementById("inputIdcard").value = null;
            document.getElementById("inputDetailedaddress").value = null;
            document.getElementById("province").value = "";
            document.getElementById("city").value = "";
            document.getElementById("district").value = "";
        }

        //查询
        function mohu(){
            let name =document.getElementById("name").value;
            let age =document.getElementById("age").value;
            if (age === 0){
                document.getElementById("InputAgeError").style.display = "inline-block";
                return;
            }
            if (!age){
                age = -1;
            }else if (age <= 0){
                document.getElementById("InputAgeError").style.display = "inline-block";
                return;
            }
            var startTime = document.getElementById("begin").value;
            var endTime = document.getElementById("end").value;
            if (startTime && endTime){
                if (startTime > endTime){
                    document.getElementById("TimeError").style.display = "inline-block";
                    document.getElementById("TimeError").innerText = "开始时间须小于结束时间";
                    return;
                }
            }
                $.ajax({
                    url: 'user/select1',
                    data: {
                        name: name,
                        age: age,
                        startTime: startTime,
                        endTime: endTime,
                        pn: 1
                    },
                    type: 'get',
                    dataType: 'json',
                    contentType: 'application/json;charset=utf-8',
                    success: function (result) {
                        console.log("res:", result)
                        buildUsersTab(result);
                        // 重新构建分页条
                        buildNavTab(result);
                        // 更新表格左下角的页码
                        updateCurrentPage(result.pageNum);
                    },
                    complete: function (err) {
                        console.log("err:", err);
                    },

                });
        }

        //重置
        function rest(){
            $("#name").val("");
            $("#age").val("");
            $("#begin").val("");
            $("#end").val("");
            fetchReleasedData()
        }

        //右侧逻辑删除
        function deleteright(id){
            console.log(loginUser);
            if (!loginUser){
                alert("您还没有登录，请先登录!");
                window.location.href ="login.html";
                return;
            }else {
                if (confirm("确定要删除？")) {
                    let currentPage = getCurrentPage(); // 从localStorage中获取当前页码
                    $.ajax({
                        url: 'user/deleteright',
                        type: 'post',
                        data: {
                            id: id
                        },
                        dataType: 'json',
                        success: function (res) {
                            alert("删除成功");
                            console.log("删除成功:", res);
                            fetchReleasedData(currentPage)
                        },
                        error: function () {
                            alert("删除失败");
                        },
                    });
                }else{
                    alert("取消删除")
                }
            }
        }

        // 登录
        function login(){
            window.location.href = "login.html";
        }
        // 退出
        function exit(){
            sessionStorage.clear();
            if (confirm("确定要退出吗？")) {
                $.ajax({
                    url: "system/exit",
                    data: {},
                    type: "get",
                    success: function (res) {
                        alert("退出成功");
                    }
                })
            }else{
                return;
            }
            window.location.href = "login.html";
        }
    </script>
</head>
<body>
<form class="form-inline">
    <div class="form-group">
        <label for="name">姓名</label>
        <input type="text" class="form-control" id="name" oninput="mohu(this.value)">
    </div>

    <div class="form-group">
        <label for="age">年龄</label>
        <input type="text" class="form-control" id="age" oninput="mohu(this.value)">
        <div id="InputAgeError" style="color: red;text-align:center;margin-top: 5px;display:none;">年龄必须大于0岁</div>
    </div>
    <div class="form-group">
        <label>创建时间</label>
        <input type="date" class="form-control" id="begin" placeholder="开始时间" size="8px">
        -
        <input type="date" class="form-control" id="end" placeholder="结束时间" size="8px">
        <div id="TimeError" style="color: red;text-align:center;margin-top: 5px;display:none;"></div>
    </div>

    <button type="button" class="btn btn-success btn-sm" onclick="mohu()">
        <span class="glyphicon glyphicon-search" aria-hidden="true" ></span> 搜索
    </button>
    <button type="button" class="btn btn-warning btn-sm" onclick="rest()">
        <span class="glyphicon glyphicon-refresh" aria-hidden="true"></span>重置
    </button>
    <button type="button" id="exitBtn" style="float: right;margin-left: 10px;" class="btn btn-success" onclick="exit()">退出</button>
    <div id="ifLogin" class="form-group" style="float: right;margin-top: 6px;">欢迎&nbsp;<span id="username">username</span>&nbsp;登录</div>
    <button type="button" id="loginBtn" style="float: right;margin-right: 10px;" class="btn btn-success" onclick="login()">登录</button>
</form>

<!--<form class="form-inline">-->

<div class="form-group">
    <!-- Button trigger modal -->
    <button type="button" class="btn btn-success" data-toggle="modal" data-target="#myModal" >
        新增
    </button>
    <button class="btn btn-danger" onclick="deleteall()">批量删除</button>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="myModalLabel">添加字典</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <label for="inputName" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputName" placeholder="请输入姓名" >
                            <span style="color: red; display: inline-block; margin-left: 5px;">* 必填</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="inputIdcard" class="col-sm-2 control-label">身份证</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="inputIdcard" placeholder="请输入身份证">
                            <span style="color: red; display: inline-block; margin-left: 5px;">* 必填</span>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-sm-4">
                            <select class="form-control" id="province" name="province">
                                <option value="">选择省份</option>
                                <!-- 这里可以动态添加省份选项 -->
                            </select>
                        </div>
                        <div class="col-sm-4">
                            <select class="form-control" id="city" name="city">
                                <option value="">选择城市</option>
                                <!-- 这里可以动态添加城市选项 -->
                            </select>
                        </div>
                        <div class="col-sm-4">
                            <select class="form-control" id="district" name="district">
                                <option value="">选择区域</option>
                                <!-- 这里可以动态添加区域选项 -->
                            </select>
                        </div>
                        <span style="color: red; display: inline-block; margin-left: 5px;">* 必填</span>
                    </div>

                    <div class="form-group">
                        <label for="inputDetailedaddress" class="col-sm-2 control-label">详细地址</label>
                        <div class="col-sm-10">
                        <input type="text" class="form-control" id="inputDetailedaddress" placeholder="请输入详细地址">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" onclick="saveData()">保存数据</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>


<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
                <h4 class="modal-title" id="exampleModalLabel">编辑</h4>
            </div>
            <div class="modal-body">
                <form class="form-horizontal">
                    <div class="form-group">
                        <div class="col-sm-10">
                            <input type="hidden" id="Id" value="">
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="updateName" class="col-sm-2 control-label">姓名</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="updateName" placeholder="请输入姓名" >
                            <span style="color: red; display: inline-block; margin-left: 5px;">* 必填</span>
                        </div>
                    </div>
                    <div class="form-group">
                        <label for="updateIdcard" class="col-sm-2 control-label">身份证</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="updateIdcard" placeholder="请输入身份证">
                            <span style="color: red; display: inline-block; margin-left: 5px;">* 必填</span>
                        </div>
                    </div>

                    <div class="form-group row">
                        <div class="col-sm-4">
                            <select class="form-control" id="province1" name="province1">
                                <option value="">选择省份</option>
                                <!-- 这里可以动态添加省份选项 -->
                            </select>
                        </div>
                        <div class="col-sm-4">
                            <select class="form-control" id="city1" name="city1">
                                <option value="">选择城市</option>
                                <!-- 这里可以动态添加城市选项 -->
                            </select>
                        </div>
                        <div class="col-sm-4">
                            <select class="form-control" id="district1" name="district1">
                                <option value="">选择区域</option>
                                <!-- 这里可以动态添加区域选项 -->
                            </select>
                        </div>
                        <span style="color: red; display: inline-block; margin-left: 5px;">* 必填</span>
                    </div>

                    <div class="form-group">
                        <label for="updateDetailedaddress" class="col-sm-2 control-label">详细地址</label>
                        <div class="col-sm-10">
                            <input type="text" class="form-control" id="updateDetailedaddress" placeholder="请输入详细地址">
                        </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-default" data-dismiss="modal">关闭</button>
                        <button type="button" class="btn btn-primary" onclick="updateData()">保存数据</button>
                    </div>
                </form>
            </div>
        </div>
    </div>
</div>

<!--</form>-->
<table class="table table-striped" id="userstab">
    <thead>
    <th><input type="checkbox" id="checkAll" onclick="checkAll()"/></th>
    <th>序号</th>
    <th>姓名</th>
    <th>年龄</th>
    <th>性别</th>
    <th>身份证</th>
    <th>省</th>
    <th>市</th>
    <th>区</th>
    <th>详细地址</th>
    <th>操作</th>
    </thead>
    <tbody>
    <!-- 显示遍历出来的用户数据 -->
    </tbody>
    <tfoot>
    <tr>
        <td colspan="3">
            当前<span id="currentPage"></span>页，共有<span id="pages"></span>页，共有<span id="total"></span>条数据

        </td>
        <td colspan="5" align="center">

            <nav aria-label="Page navigation" id="pnav">

            </nav>
        </td>
    </tr>
    </tfoot>
</table>
</body>
<script src="./area.js"></script>
<script type="text/javascript">
    // 注意：功能兼容ie，样式完美兼容到ie11
    // 1.select原生下箭头样式兼容到ie10，需要在ie9及以下设置判断，区分样式
    // 2.ie有页面刷新select框缓存的问题，缓存后不能直接选取城市，js设置的placeholder也会有影响
    // 3.select框不能设置最大最小宽度
    // 4.ie不兼容input placeholder 颜色，但是我们的select是js控制的，如果跟表单一同写，会有差异

    var select = new SelectAddress('province', 'city', 'district', provinceList)
    select.init()

    var unSelected = "#999";
    var selected = "#333";
    $("select").css("color", unSelected);
    // $("option").css("color", selected);
    $("#province").change(function () {
        select.handleProvinceClick.apply(select)
        var selItem = $(this).val();
        if (selItem == $(this).find('option:first').val()) {
            $(this).css("color", unSelected);
        } else {
            $(this).css("color", selected);
        }
        $("#city").css("color", unSelected);
        $("#district").css("color", unSelected);
    });
    $("#city").change(function () {
        select.handleCityClick.apply(select)
        var selItem = $(this).val();
        if (selItem == $(this).find('option:first').val()) {
            $(this).css("color", unSelected);
        } else {
            $(this).css("color", selected);
        }
        $("#district").css("color", unSelected);
    });
    $("#district").change(function () {
        select.handleDistrictClick.apply(select)
        var selItem = $(this).val();
        if (selItem == $(this).find('option:first').val()) {
            $(this).css("color", unSelected);
        } else {
            $(this).css("color", selected);
        }
    });
</script>
<script src="./area.js"></script>
<script type="text/javascript">

    var select1 = new SelectAddress('province1', 'city1', 'district1', provinceList)
    select1.init()

    var unSelected1 = "#999";
    var selected1 = "#333";
    $("select").css("color", unSelected1);
    // $("option").css("color", selected);
    $("#province1").change(function () {
        select1.handleProvinceClick.apply(select1)
        var selItem1 = $(this).val();
        if (selItem1 == $(this).find('option:first').val()) {
            $(this).css("color", unSelected1);
        } else {
            $(this).css("color", selected1);
        }
        $("#city1").css("color", unSelected1);
        $("#district1").css("color", unSelected1);
    });
    $("#city1").change(function () {
        select1.handleCityClick.apply(select1)
        var selItem1 = $(this).val();
        if (selItem1 == $(this).find('option:first').val()) {
            $(this).css("color", unSelected1);
        } else {
            $(this).css("color", selected1);
        }
        $("#district1").css("color", unSelected1);
    });
    $("#district1").change(function () {
        select1.handleDistrictClick.apply(select1)
        var selItem1 = $(this).val();
        if (selItem1 == $(this).find('option:first').val()) {
            $(this).css("color", unSelected1);
        } else {
            $(this).css("color", selected1);
        }
    });
</script>
</html>